<template>
  <div class="w-full h-full bg-white px-4 py-2 rounded-lg">

    <div class="flex justify-between items-center">
      <span class="title block font-black px-2 py-2 text-xl text-violet-500">
          <i class="iconfont icon-lishiyuding mr-2 font-mono font-black"/>{{ $t('common.TransferHistory') }}</span>
      <el-form :inline="true" :model="data.form" class="align-center items-center search-form">
        <el-form-item class="label" :label="$t('iot.time')">
          <el-date-picker
            style="width: 220px"
            v-model="data.form.time"
            type="daterange"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            :range-separator="$t('wms.to')"
            :start-placeholder="$t('wms.startTime')"
            :end-placeholder="$t('wms.endTime')"
            class="custom-date-picker"
          />
        </el-form-item>
        <el-form-item class="label" :label="$t('wms.materialCode')">
          <el-input
            v-model="data.form.materialCode"
            :placeholder="$t('wms.pleaseEnter')"
            clearable
            class="custom-input"
          />
        </el-form-item>
        <el-form-item class="label" :label="$t('common.OutWarehouse')">
          <el-select  v-model="data.form.OutWarehouse" style="width: 140px" clearable :placeholder="$t('wms.pleaseSelect')">
            <el-option
                       v-for="item in data.optionName"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"

            />
          </el-select>
        </el-form-item>
        <el-form-item class="label" :label="$t('common.InWarehouse')">
          <el-select v-model="data.form.InWarehouse" clearable style="width: 140px" :placeholder="$t('wms.pleaseSelect')">
            <el-option
                       v-for="item in data.optionName"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button icon="Search" class="buttons"  type="primary" @click="getNumList">{{ $t('wms.search') }}</el-button>
      </el-form>

    </div>

    <div class="table-list w-full h-full">
      <el-table
        border
        id="out-table"
        :data="tableData"
        :fit="true"
        table-layout="fixed"
        header-align="center"
        class="from-box"
        v-loading="data.loading"
        style="width:100%;height: 80%;"
        :header-cell-style="{
        color: '#1e293b',
        textAlign: 'center',
        fontWeight: '600',
        background: 'linear-gradient(to bottom, #f8fafc, #f1f5f9)',
        borderColor: '#e2e8f0',
        height: '40px'
      }"
        :cell-style="{
        textAlign: 'center',
        color: '#334155',
        borderColor: '#e2e8f0',
        background: '#fff',
        height: '40px'
      }"
        :row-class-name="tableRowClassName"
        :summary-method="getSummary"
        show-summary
      >
        <el-table-column prop="docDate" :label="$t('common.docDate')"/>
        <el-table-column prop="docNo" :label="$t('common.docNo')"/>
        <el-table-column prop="barcode" :label="$t('wms.barcode')"/>
        <el-table-column prop="materialCode" :label="$t('wms.materialCode')"/>
        <el-table-column prop="materialName" :label="$t('agv.materialName')" show-overflow-tooltip/>
        <el-table-column prop="materialSpec" :label="$t('wms.materialSpce')" show-overflow-tooltip align="center"/>
        <el-table-column prop="qty" :label="$t('wms.qty')" align="center">
          <template #default="scope">
            <el-tag>
              {{ scope.row.qty }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="unitCode" :label="$t('wms.unit')"/>
        <el-table-column prop="outWarehouse" :label="$t('common.OutWarehouse')">
          <template #default="scope">
            <el-tag type="warning">
              {{ scope.row.outWarehouse }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="inWarehouse" :label="$t('common.InWarehouse')">
          <template #default="scope">
            <el-tag type="success">
              {{ scope.row.inWarehouse }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>

      <div class="flex justify-end mt-3">
        <el-pagination
          :current-page="data.current"
          :page-size="data.size"
          :page-sizes="[5, 10, 15, 20]"
          small
          background
          class="custom-pagination"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import moment from 'moment/moment'
import { getTransferHistory ,fetchWarehouseList} from '@/api/transferQuantityApi'

const data = reactive({
  form: {
    materialCode: '',
    time: [],
  },
  optionName:[],
  current: 1,
  size: 20,
  total: 0,
  loading:false
})
const tableData = ref([])
const handleSizeChange = (val) => {
  data.size = val
  getNumList()
}
const handleCurrentChange = (val) => {
  data.current = val
  getNumList()
}

const tableRowClassName = ({ rowIndex }) => {
  return rowIndex % 2 === 1 ? 'bg-gray-50' : ''
}

const getWarehouseList=async()=>{
  try {
  const res=  await fetchWarehouseList()
    data.optionName = res.data.map(item=>{
      return {
        label:item.warehouseName,
        value:item.warehouseCode
      }
    })
  } catch (e) {
    console.log(e)
  }

}

const getNumList = async () => {
  data.loading = true
  try {
    const res = await getTransferHistory({
      startTime: data.form?.time?.[0]||'',
      endTime: data.form?.time?.[1]||'',
      current: data.current,
      size: data.size,
      materialCode: data.form.materialCode,
      outWarehouse:data.form.OutWarehouse,
      inWarehouse:data.form.InWarehouse
    })
    tableData.value = res.data.records
    data.total = res.data.total
    data.loading = false
  } catch (e) {
    console.log(e)
  }
}
// 默认当天时间
const getToday = () => {
  const start = moment().subtract(0, 'days').format('YYYY-MM-DD')// 本月一号
  const end = moment().format('YYYY-MM-DD') // 今天
  data.form.time = [start, end]
}

onMounted(()=>{
  getToday()
  getNumList()
  getWarehouseList()
})

const getSummary = (param) => {
  const { columns } = param;
  const totalQty = tableData.value.reduce((sum, item) => sum + item.qty, 0).toFixed(2);

  return columns.map((column, index) => {
    if (index === 5) { // 假设数量列为索引 6
      return  `Sum`
    }
    if (index === 6) { // 假设数量列为索引 6
      return  totalQty
    }
    return  ''
  });
};
</script>

<style scoped lang="scss">
:deep(.el-form) {
  display: flex;
  justify-content: center;
}


:deep(.el-form-item){
  margin-top: 10px;
  margin-bottom: 10px;
}
</style>
